<template>
	<view>
		<view class="goods-list" style="margin-top: 1rem;">
			<view class="product-list">
				<view class="product margin-bottom-sm" v-for="(goods,idx) in goodsList" :key="idx"
					@tap="_toGoodsDetail(goods)">
					<image v-if="goods.coverPhoto" style="height: 8rem;" :src="goods.coverPhoto"></image>
					<image v-else style="height: 8rem;" src="/static/noPic.png"></image>
					<view class="name margin-xs">{{goods.prodName}}</view>
					<view class="info flex justify-end padding-bottom-sm">
						<view class="decoration">￥{{goods.price}}</view>
						<view class="price_count">销量:{{goods.sales||0}}</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getProduct
	} from '@/api/goods/goodsApi.js';
	import {getCommunityId} from '@/api/community/communityApi.js';
	export default {
		data() {
			return {
				goodsList: [],
				cond: {
					pagesize: 10,
					pagefrom: 1,
					hktId: "",
					categoryId:'',
					shopId:''
				},
				loadingText:'',
			}
		},
		async onLoad(_options) {
			await this.vc.onLoad(_options).then(_suc=>{},_err=>{});
			this.cond.hktId = _options.hktId;
			this.cond.shopId = _options.shopId;
			this.cond.categoryId = _options.categoryId;
			this.getProductByCid();
		},
		onReachBottom() {
			uni.showToast({
				title: '正在加载'
			});
			this.getProductByCid();
		},
		methods: {
			getProductByCid() {
				var that = this;
				if(this.cond.pagefrom == 1){
					that.goodsList=[];
				}
				let _data = {
					page: this.cond.pagefrom,
					row: this.cond.pagesize,
					hktId: this.cond.hktId,
					categoryId:this.cond.categoryId,
					shopId:this.cond.shopId,
				}
				getProduct(_data)
					.then((_data,res) => {
						let li = _data.data;
						let old_li = that.goodsList;
						let new_li = old_li.concat(li);
						that.goodsList = new_li;
						if (that.cond.pagefrom <= _data.records) {
							that.cond.pagefrom = that.cond.pagefrom + 1;
						} else {
							that.loadingText = "已经到底了";
						}

					});
			},
			_toGoodsDetail: function(_product) {
				this.vc.navigateTo({
					url: '/pages/goods/goods?productId=' + _product.productId + "&shopId=" + _product.shopId
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	.place {

		background-color: #ffffff;
		height: 200upx;

	}

	.price_count {
		color: #999;
		font-size: 14px
	}

	.decoration {
		//text-decoration:line-through;
		color: #fa436a;
		font-size: 14px
	}

	.goods-list {
		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 100%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				width: 48%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 20upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);

				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}

				.name {
					width: 92%;
					//padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
					margin-left: 10upx;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					margin-left: 10upx;
					//	padding: 10upx 4% 10upx 4%;

					.price {
						color: #e65339;
						font-size: 30upx;
						font-weight: 600;
					}

					.slogan {
						color: #807c87;
						font-size: 24upx;
					}
				}
			}

		}
	}
</style>
